<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/jquery.fancybox.css" />
<?php  echo CHtml::scriptFile('/js/jquery.fancybox.js'); ?>
<?php $this->pageTitle=Yii::app()->name; ?>
<style>
.album_item{
    border:3px solid #ccc;
    box-shadow:1px 1px 5px #333; 
    -webkit-box-shadow:1px 1px 5px #ccc;
    -moz-box-shadow:1px 1px 5px #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:5px;
    margin-left:10px;
    float:left;
    width:310px;
    height:310px;
    padding:5px;
    margin-bottom:10px;
    text-align:center;
}
</style>
<section class="right-content" style="text-align:center; padding: 50px;">
     <?php foreach ($picture as $val){ ?>
        <div class="album_item">
            <a href="<?php echo $val['source']; ?>" title="<?php echo $val['title']; ?>" data-fancybox-group="button" class="fancybox_buttons">
            <img class="lazy img-rounded" src="/images/grey.gif" data-original="<?php echo $val->thumb; ?>"/>
            </a>
        </div>
    <?php } ?>
    <div style="clear: both;"></div>
</section>
<?php  echo CHtml::scriptFile('/js/jquery.lazyload.js'); ?>
<script>
    $(document).ready(function(){
        $("img.lazy").lazyload({
            effect : "fadeIn"
        });
        
        $('.fancybox_buttons').fancybox({
                openEffect  : 'none',
                closeEffect : 'none',
                prevEffect : 'none',
                nextEffect : 'none',
                closeBtn  : true,
                helpers : {
                        title : {
                                type : 'inside'
                        },
                        buttons	: {}
                },
                afterLoad : function() {
                        this.title = '[Image ' + (this.index + 1) + ' / ' + this.group.length + (this.title ? '] - ' + this.title : '');
                }
        });
    });
</script>